<template>
  <div class="wrap">
    <div class="item">
      <p class="title">手机号</p>
      <van-field v-model="tel" type="tel" placeholder="请输入手机号" maxlength="11" />
    </div>

    <div class="item itemMsg">
      <p class="title">短信验证码</p>
      <van-field v-model="sms" center type="number" clearable placeholder="请输入短信验证码" maxlength="6">
        <template #button>
          <van-button size="small" v-if="sureIf == 1" type="primary" color="#000" @click="getCode">发送验证码</van-button>
          <van-button size="small" v-else type="primary" color="#000">{{ seconds }}S</van-button>
        </template>
      </van-field>
    </div>
    <div class="item itemAgrement">
      <span @click="jumpServiceAggrement">《服务协议》</span>
      <span @click="jumpPrivacyPolicy">《隐私政策》</span>
    </div>

    <button class="loginBtn" @click="jumpLogin">登录</button>
    <van-overlay :show="show" @click="show = false" :lockScroll="false">
      <div class="wrapper" @click.stop>
        <van-dialog v-model="show" :title="resAgreement.title" :close-on-click-overlay="true" showConfirmButton @confirm="confirm" width="80%" :confirm-button-color="'#333'" confirm-button-text="确定">
          <div class="dialog-content1" v-html="resAgreement.content"></div>
        </van-dialog>
      </div>
    </van-overlay>
    <van-overlay :show="showService" @click="showService = false" :lockScroll="false">
      <div class="wrapper" @click.stop>
        <van-dialog v-model="showService" :title="serviceAggrement.title" :close-on-click-overlay="true" showConfirmButton @confirm="confirm" width="80%" :confirm-button-color="'#333'" confirm-button-text="确定">
          <div class="dialog-content" v-html="serviceAggrement.content"></div>
        </van-dialog>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { regex } from '@/assets/js/identyRules.js';
import { Field, Button, Overlay, Dialog } from 'vant';
import { isEmpty, isMobilePhone } from 'class-validator';
import { apiLogin, getCodeReq, apiPrivateAgreement, apiUserAgreement } from '@/request/api'; // api接口
export default {
  name: 'App',
  data() {
    return {
      tel: '',
      sms: '',
      seconds: 60, //发送验证码倒计时
      sureIf: 1, //1代表显示重新获取btn
      show: false,
      showService: false,
      resAgreement: '',
      serviceAggrement: '',
    };
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#F2F4FA');
  },
  methods: {
    //获取短信验证码:
    getCode() {
      // if(!regex.phone.test()){
      //   this.$toast.fail('请输入正确的手机号')
      //   return
      // }
      if (!isMobilePhone(this.tel, 'zh-CN')) {
        this.$toast('请输入有效手机号');
        return;
      }
      getCodeReq({
        type: 1,
        mobile: this.tel,
      }).then((res) => {
        if (res.code == 200) {
          this.timer();
          this.$toast.success('发送成功，请注意查收');
        }
        console.log('getCodeReq', res);
      });
    },
    // 倒计时:
    timer() {
      var _this = this;
      this.sureIf = 0;
      this.seconds = 60;
      var time = setInterval(function () {
        if (_this.seconds !== 0) {
          _this.waitTime = 1;
          _this.seconds -= 1;
          _this.sureIf = 0;
        } else if (_this.seconds === 0) {
          _this.waitTime = 0;
          _this.sureIf = 1;
          clearInterval(time);
        }
      }, 1000);
    },
    jumpLogin() {
      //登录：
      var that = this;
      // if (this.tel == "" || this.sms == "") {
      //   this.$toast.fail("请填写正确完整信息");
      // }
      if (!isMobilePhone(this.tel, 'zh-CN')) {
        this.$toast('请输入有效手机号');
        return;
      }
      if (isEmpty(this.sms)) {
        this.$toast('请输入短信验证码');
        return;
      }

      apiLogin({
        checkCode: this.sms,
        mobile: Number(this.tel),
        openId: localStorage.getItem('openId'),
        loginType: 1,
      }).then((res) => {
        console.log('res-login', res.data);
        if (res.code === 200) {
          localStorage.setItem('loginInfo', JSON.stringify(res.data));
          localStorage.setItem('Who', 0); //用户身份为0
          console.log('获取个人信息', JSON.parse(localStorage.getItem('loginInfo')));
          window.location.href = `/`; //${this.$hostName}由于axios全局只加载一次，在登录接口的时候已经加载了第一次，用户的token、userId需要在登录之后才能设置到header里面，需要在程序上重新执行一次axios代码逻辑，这种跳转方式能够实现axios封装重新注册执行一次
          // if (!res.data.isFinish) {
          //   console.log("没有完善个人地址信息-跳转信息完善页面");
          //   window.location.href = `/#/pages/reciveAddrList`
          // } else {
          //   console.log("完善了个人信息-跳转首页");
          //   window.location.href = `/`; //${this.$hostName}由于axios全局只加载一次，在登录接口的时候已经加载了第一次，用户的token、userId需要在登录之后才能设置到header里面，需要在程序上重新执行一次axios代码逻辑，这种跳转方式能够实现axios封装重新注册执行一次
          // }
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    //获取隐私协议：
    getAgreement() {
      apiPrivateAgreement({}).then((res) => {
        this.resAgreement = res.data;
      });
    },
    jumpPrivacyPolicy() {
      // this.$router.push({
      //   path: "/pages/privacyPolicy",
      //   query: {
      //     //传递参数
      //   },
      // });
      this.show = true;
      this.getAgreement();
    },
    jumpServiceAggrement() {
      this.showService = true;
      this.getServiceAggrement();
      // this.$router.push({
      //   path: "/pages/serviceAggrement",
      //   query: {
      //     //传递参数
      //   },
      // });
    },
    confirm() {
      this.show = false;
      this.showService = false;
    },
    //获取隐私协议：
    getServiceAggrement() {
      apiUserAgreement({}).then((res) => {
        this.serviceAggrement = res.data;
      });
    },
  },
  created() {},
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [Overlay.name]: Overlay,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style scoped>
.wrap {
  /* margin-top: 30px; */
  width: 95%;
  margin: 20px auto;
}
.item {
  margin-bottom: 26px;
}
.title {
  font-size: 13px;
  font-weight: 400;
  color: #181818;
  margin-bottom: 16px;
}
.van-cell {
  border-radius: 22px;
}
.van-field__button button {
  background: #f48f5b !important;
  border-color: #f48f5b !important;
  border-radius: 22px;
}
.itemMsg .van-cell {
  padding: 6px 16px !important;
}
.itemAgrement {
  text-align: right;
  color: #f48f5b;
  font-weight: 600;
  font-size: 12px;
}
.itemAgrement span {
  padding-left: 10px;
}
.loginBtn {
  width: 90%;
  margin: 20px auto;
  margin-left: 3%;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  height: 50px;
  /* line-height: 50px; */
  border: 0px;
  border-radius: 22px;
  text-align: center;
  position: fixed;
  bottom: 22px;
}
.van-dialog {
  font-size: 14px !important;
  -webkit-overflow-scrolling: touch;
  overflow: scroll
}
.dialog-content {
  padding: 20px !important;
  height: 200px !important;
  overflow: auto !important;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.dialog-content1{
   padding: 20px !important;
  height: 200px !important;
  overflow: auto !important;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.van-dialog__content {
  /* white-space: pre-wrap;
   overflow: auto;
    -webkit-overflow-scrolling:touch; */
    -webkit-overflow-scrolling: touch;
    overflow: scroll
    
}
</style>
